import React, {useState} from 'react';
import Box from "@material-ui/core/Box";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import MessageIcon from '@mui/icons-material/Message';
import AddchartIcon from '@mui/icons-material/Addchart';
import AccountBoxIcon from '@mui/icons-material/AccountBox';
import {makeStyles} from "@material-ui/core/styles";
import Router from "next/router";
import SvgIcon from "@material-ui/core/SvgIcon";
import Button from "@material-ui/core/Button";
import dynamic from "next/dynamic";

const MyPlayer = dynamic(() => import("../components/player"), { ssr: false });


function Stethoscope() {
    const [connected, setConnected] = useState(false);
    const [open, setOpen] = useState(false);
    const [message, setMessage] = useState("");
    const [alertType, setAlertType] = useState("error");
    const [listening, setListening] = useState(false);

    const useStyles = makeStyles({
        logincard: {
            position: "relative",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            margin: "0 auto",
            width: 700,
            height: 748,
            borderRadius: 25,
            backgroundColor: "transparent",
            boxShadow: "rgb(34 34 34 / 10%) 0px 8px 22px 6px",
            border: "1px solid rgba(225, 225, 225, 0)"
        },
        loginLogo: {
            height: 160,
            width: 160
        },
        container:{
            maxWidth: "100%",
        },
        functionContainer:{
            width: "100%",
            display: "flex",
        },
        leftSelectBox:{
            height: 648,
            width: "14%",
        },
        centralFunctionBox:{
            //backgroundColor: "rgba(158,0,255)",
            //border: "2px solid rgba(158,0,255)",
            height: 648,
            width: "86%",
        }

    });
    const styles = useStyles();

    function scope() {
        function Buttons() {
            /*const handleMessage = (event) => {
                console.log(event.data);
            };

            const handleOpen = (event) => {
                setConnected(true);
                showAlert("success", "连接Websocket成功");
            }

            const handleClose = () => {
                setConnected(false);
                showAlert("error", "断开连接");
            }

            const options = {
                onOpen: handleOpen,
                onMessage: handleMessage,
                onClose: handleClose,
                manual: true,
                reconnectLimit: 1000,
                reconnectInterval: 100,
            };

            const {
                readyState,
                sendMessage,
                latestMessage,
                disconnect,
                connect
            } = useWebSocket("ws://8.131.62.53:8080/api/connws", options);

            function connectWebsocket() {
                setConnected(true)
                connect();
            }*/

            const showAlert = (type, msg) => {
                setAlertType(type);
                setConnected(true);
                setOpen(true);
                setMessage(msg);
                setTimeout(() => {
                    setOpen(false)
                }, 2000);
            }

            //<---->
            function startListening() {
                setListening(true);
                console.log("startListening")
            }


            const ButtonStyles = makeStyles({
                outsideContainer:{
                    height: "100%",
                    width: "100%",
                    border: "2px solid black",
                    display: "flex"
                },
                itemStyle:{
                    border: "1px solid #AEAEAE",
                    borderRadius: 10,
                    marginTop: 10,
                    width: 160,
                    marginLeft: 15,
                    height: 40,
                    backgroundColor: "#FFFFFF",
                    display: "flex",
                    /*实现垂直居中*/
                    alignItems: "center",
                    /*实现水平居中*/
                    justifyContent: "center",
                    fontWeight:"bold"
                }
            });
            const buttonStyle = ButtonStyles();
            return (
                <Box className={buttonStyle.outsideContainer}>
                    <Button className={buttonStyle.itemStyle} onClick={connectWebsocket}>连接服务器</Button>
                    <Button className={buttonStyle.itemStyle} onClick={startListening}>开始听诊</Button>
                </Box>
            );
        }

        function Screen() {
            const ScreenStyles = makeStyles({
                outsideContainer:{
                    height: "100%",
                    width: "100%",
                    //border: "2px solid black"
                }
            });
            const screenStyle = ScreenStyles();
            return (
                <Box className={screenStyle.outsideContainer}>
                    <MyPlayer/>
                </Box>
            );
        }

        const ScopeStyles = makeStyles({
            outsideContainer:{
                height: "100%",
                width: "100%",
                //border: "2px solid #1C4BD8"
            },
            screenContainer:{
                height: "89%",
                width: "100%",
                //border: "2px solid black",
            },
            buttonContainer:{
                height: "10%",
                width: "100%",
                border: "2px solid red",
            }
        });
        const scopeStyle = ScopeStyles();
        return (
            <Box className={scopeStyle.outsideContainer}>
                <MyPlayer/>
            </Box>
        );

    }
    return (
        <div>
            <div className={styles.container}>
                {TopBar()}
            </div>
            <div className={styles.functionContainer}>
                {/*左侧功能导航栏*/}
                <Box className={styles.leftSelectBox}>
                    {leftSelectBar()}
                </Box>
                <div className={styles.centralFunctionBox}>
                    {scope()}
                </div>
            </div>
        </div>
    );
}

function TopBar() {
    const [auth, setAuth] = React.useState(true);
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleMenu = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };
    return (
        <Box sx={{ flexGrow: 1 }}>
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                       Gulu 仪表盘
                    </Typography>
                </Toolbar>
            </AppBar>
        </Box>
    );
}


function leftSelectBar() {
    const leftStyles = makeStyles({
        leftOutsideContainer:{
            //border: "2px solid rgba(255,255,255)",
            //backgroundColor: "#3F51B5",
            backgroundColor: "#FFFFFF",
            paddingTop: 100,
            paddingBottom: 100,
            width: "100%",
            height: 448,
            marginTop:10
        },
        leftItemStyle:{
            border: "1px solid #AEAEAE",
            borderRadius: 10,
            marginTop: 30,
            width: 160,
            marginLeft: 15,
            height: 40,
            backgroundColor: "#FFFFFF",
            display: "flex",
            /*实现垂直居中*/
            alignItems: "center",
            /*实现水平居中*/
            justifyContent: "center",
            fontWeight:"bold"
        }
    });
    const leftStyle = leftStyles();

    function toIndex() {
        Router.push('/')
    }
    function toMessage() {
        console.log('toMessage')
    }
    function toFunctions() {
        Router.push('/functions')
    }
    function toMy() {
        console.log("toMy")
    }

    return (
        <Box className={leftStyle.leftOutsideContainer}>
            <div className={leftStyle.leftItemStyle}>
                <Button variant="text" style={{width:"100%", fontWeight:"bold"}} onClick={toIndex}>
                    <HomeIcon style={{marginRight:15}} /><span>首页</span>
                </Button>
            </div>
            <div className={leftStyle.leftItemStyle}>
                <Button variant="text" style={{width:"100%", fontWeight:"bold"}} onClick={toMessage}>
                    <MessageIcon style={{marginRight:15}} />消息
                </Button>
            </div>
            <div className={leftStyle.leftItemStyle}>
                <Button variant="text" style={{width:"100%", fontWeight:"bold"}} onClick={toFunctions}>
                    <AddchartIcon style={{marginRight:15}} />功能
                </Button>
            </div>
            <div className={leftStyle.leftItemStyle}>
                <Button variant="text" style={{width:"100%", fontWeight:"bold"}} onClick={toMy}>
                    <AccountBoxIcon style={{marginRight:15}} /> 我的
                </Button>
            </div>
        </Box>
    );
}

function HomeIcon(props) {
    return (
        <SvgIcon {...props}>
            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
        </SvgIcon>
    );
}









export default Stethoscope;